<template>
  <div id="search-service">
    <van-nav-bar title="巡查服务" left-arrow @click-left="back" fixed />
    <div class="search-content">
      <div class="service-details">服务详情</div>
      <div class="service-content">
        <van-cell-group>
          <van-field v-model="serviceName" label="服务名称" disabled class="aaa" />
          <van-field v-model="searchTime" label="巡查时间" disabled />
          <div class="van-cell">
            <span class="item-title">任务内容</span>
            <span class="item-describ">{{taskDefination}}</span>
          </div>
        </van-cell-group>
      </div>
      <div class="blank-style"></div>
      <div class="service-details">服务人群</div>
      <div class="total-style">
        <div>
          <span class="patrol-title">巡查人数</span>
          <span class="patrol-number" @click="onClickRight">
            <span>共{{number}}人</span>
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
    </div>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "searchService",
  data() {
    return {
      serviceName: "独居老人定期巡查",
      searchTime: "每周一、周三全天",
      taskDefination:
        "对所属辖区老人进行巡查，老人相关信息有变更的及时登记，异常情况及时反馈",
      number: 0,
      showLoading: true
    };
  },
  created() {
    this.getSearchNum()
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({ path: "/work/patrolList" });
    },
    getSearchNum() {
      api 
      .pensionRecord_v1_count()
      .then(res => {
        this.showLoading = false
        this.number = res.datas
      })
      .catch(() => {
        this.$toast(constant.netErrMsg);
      })
    }
  }
};
</script>
<style lang="scss" scope>
#search-service {
  .search-content {
    background: #ffffff;
    line-height: 50px;
    .service-details {
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #333333;
      letter-spacing: 0;
      padding-left: 15px;
      border-bottom: 0.5px solid #edeff2;
    }
  }
  .service-content {
    width: 375px;
    .van-cell {
      padding: 15px 0;
      width: 345px;
      margin: 0 auto;
      border-bottom: 0.5px solid #edeff2;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
    }
    .item-title {
      display: inline-block;
      vertical-align: middle;
      width: 90px;
    }
    .item-describ {
      display: inline-block;
      vertical-align: middle;
      line-height: 28px;
      width: calc(100vw - 125px);
    }
  }
  .blank-style {
    height: 10px;
    width: 375px;
    background: #f5f5f5;
  }
  .van-field__control:disabled {
    color: #333333;
  }
  .total-style {
    height: calc(100vh - 381px);
    div {
      height: 50px;
      line-height: 50px;
      width: 345px;
      margin: 0 auto;
      border-bottom: 0.5px solid #edeff2;
      .patrol-title {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
      }
      .patrol-number {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        float: right;
        position: relative;
        span {
          margin-right: 20px;
        }
        i {
          position: absolute;
          top: 18px;
          right: 0;
        }
      }
    }
  }
}
</style>